<template>
    <div id='wrap'>
        <h1>effectScope()改造</h1>
        <p>{{ state }}</p>
    </div>
</template>
<script lang='ts'>
export default {
    name: 'vue',
}
</script>
<script lang='ts' setup>
import { effectScope, ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy, onScopeDispose, getCurrentScope } from 'vue';
//effectScope声明作用域
const scope = effectScope();
const state = ref(0);
scope.run(() => {
    const interval = setInterval(() => {
        state.value++;
        console.log(state.value);
    }, 1000)
    //active:标记作用域是否处于激活状态
    console.log(scope.active)

    const scope1 = getCurrentScope();
    console.log(scope1 ? '有效作用域' : '无效作用域');
    onScopeDispose(() => {
        clearInterval(interval);
        console.log('作用域销毁,资源注销');
    })
})
setTimeout(() => {
    scope.stop();
}, 5000);
console.log(scope.active)

</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>